<template>
	<div class="accidentcont">
		<div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
			<div class="weui_search_outer">
				<div class="weui_search_inner">
					<i class="ion ion-ios-search"></i>
					<input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required="">
					<a href="javascript:" class="ion ion-ios-close" id="search_clear" @click="searchClear"></a>
					<!--<div class="search-box" @click="searchBlur"></div>-->
				</div>
				<label for="search_input" class="weui_search_text" @click='searchInit'>
					<i class="ion ion-ios-search"></i>
					<span>搜索</span>
				</label>
			</div>
			<a href="javascript:" class="weui_search_cancel" @click="searchBlur">搜索</a>
		</div>
	
		<div class="totleandok clearFix">
			<!-- <p v-if="$parent.chooseOnly == 1">共选择 {{totlePersion}} 人</p> -->
			<button type="button" @click="backParent">返回</button>
			<button type="button" class="shureok" @click="selectDataBack">确定</button>
	
		</div>
	
		<div class="userlist-cont">
			<div class="accidentul">
				<p>
					<span :class="{active:item.isShow}" @click="safeCollar(item,index)" v-for="(item,index) in items">{{item.name}}</span>
				</p>
			</div>
			<div class="user_list accidents" v-show="typeVo" v-infinite-scroll="loadMoreSafe" infinite-scroll-disabled="busySafe" infinite-scroll-distance="10">
				<ul>
					<li v-for="item in safeCircle" @click="chooseTypeSafe(item,$event)" :id="item.id">
						{{item.shareTitle}}
						<i class="ion ion-ios-checkmark"></i>
					</li>
				</ul>
				<div class="no_data" v-if="!safeCircle.length">
					<i class="ion ion-ios-paper-outline"></i>
					<p>暂无数据</p>
				</div>
			</div>
			<div class="user_list accidents" v-show="typeAcc" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<ul>
					<li v-for="item in safeAccident" @click="chooseTypeAlert(item,$event)" :id="item.id">
						{{item.accidentNum}} {{item.accidentDate}} {{item.country}} {{item.city}} {{item.bpAccidentType}}
						<i class="ion ion-ios-checkmark"></i>
					</li>
				</ul>
				<div class="no_data" v-if="!safeAccident.length">
					<i class="ion ion-ios-paper-outline"></i>
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">

import safeUrl from '../../assets/js/insterface'

import http from '../../assets/js/http_mixin'

import getInterface from '../../assets/js/insterface'

import getQuery from '../../assets/js/get_querys'

export default {
	mixins: [http, getQuery],
	data() {
		return {
			items: [
				{
					name: '安全圈',
					isShow: true
				}, {
					name: '事故Alert',
					isShow: false
				}
			],
			isFocus: false,
			typeVo: true,
			typeAcc: false,
			safeCircle: [],
			safeAccident: [],
			shareIds: [],
			alertIds: [],

			safetyloopData: [],
			personalId: '',
			safetyloopUrl: getInterface.getsafetyLoopUrl,
			getAlertUrl: getInterface.getAlertUrl,
			hasNoData: false,
			picked: '',
			pageTotal: '',
			typeSer: true,

			pageTotle: '',
			busy: false,
			count: 0,
			pageTotleSafe: '',
			busySafe: false,
			countSafe: 0
		}
	},
	mounted() {
		document.title = "选择安全圈/事故Alert";
		if (this.$parent.shareIdsName.length > 0) {
			this.shareIds = this.$parent.shareIdsName;
		}
		if (this.$parent.alertIdsName.length > 0) {
			this.alertIds = this.$parent.alertIdsName;
		}

		let query = this.getQuerys();
		this.personalId = query.empNo;

		this.getSafetyLoopData();
	},
	methods: {
		loadMore() {
			var vue = this;
			this.busy = true;
			// debugger
			if (this.pageTotle > this.count && this.safeAccident.length > 0) {
				vue.getAlertData();
			}
		},
		loadMoreSafe() {
			var vue = this;
			this.busySafe = true;
			// debugger
			if (this.pageTotleSafe > this.countSafe && this.safeCircle.length > 0) {
				vue.getSafetyLoopData();
			}
		},
		//安全圈获取数据
		// gethsseShareList() {
		// 	// debugger;
		// 	var vue = this;
		// 	var params = {
		// 		currentPage:this.countSafe,
		// 		pageSize:'10',
		// 		title:'',
		// 		type:'',
		// 		empNo:this.$parent.list.empNo
		// 	};
		// 	this.getInfo({
		// 		url:safeUrl.smHsseShare,
		// 		param:params,
		// 		success(response){
		// 			// debugger;
		// 			if(response.data.resultCode != 0){
		// 				var resopnseData = response.data.data;
		// 	            this.pageTotleSafe = response.data.pages;
		// 	            //debugger
		// 	            console.log(this.pageTotleSafe > this.countSafe);
		// 	            if (this.pageTotleSafe > this.countSafe) {
		// 	              // debugger;
		// 	              if (resopnseData.length > 0) {
		// 	                for (var i = 0; i < resopnseData.length; i++) {
		// 	                  this.safeCircle.push(resopnseData[i]);
		// 	                }
		// 	                //debugger
		// 	                //console.log('111111111111111111'+this.safeAccident);
		// 	              }
		// 	              this.countSafe++;
		// 	            }
		// 	            this.busySafe = false;
		// 			// this.checkChoose(0);
		// 				setTimeout(function(){
		// 					vue.checkChoose(0);
		// 				},10)
		// 			}
		// 		}
		// 	})
		// },

		//获取事故的数据
		// getAccidentList() {
		// 	var vue = this;
		// 	let searchInput = this.$refs.searchInput;
		// 	let title = searchInput.value;

		// 	let type = this.picked;
		// 	var params = {
		// 		currentPage:this.count,
		// 		pageSize:'10',
		// 		'title':title,
		// 		'type':type,
		// 		'empNo':this.personalIds
		// 		// title:'',
		// 		// type:'',
		// 		// empNo:this.$parent.list.empNo
		// 		//num:this.$parent.list.empNo
		// 	};
		// 	this.getInfo({
		// 		url:safeUrl.smAccident,
		// 		param:params,
		// 		success(response){
		// 			console.log(response);
		// 			console.log(response.data.resultCode != 0);
		// 			if(response.data.resultCode != 0){
		// 				var resopnseData = response.data.data;
		// 	            this.pageTotle = response.data.pages;
		// 	            //debugger
		// 	            console.log(this.pageTotle > this.count);
		// 	            if (this.pageTotle > this.count) {
		// 	              // debugger;
		// 	              if (resopnseData.length > 0) {
		// 	                for (var i = 0; i < resopnseData.length; i++) {
		// 	                  this.safeAccident.push(resopnseData[i]);
		// 	                }
		// 	                //debugger
		// 	                //console.log('111111111111111111'+this.safeAccident);
		// 	              }
		// 	              this.count++;
		// 	            }
		// 	            this.busy = false;
		// 	            // setTimeout(function(){
		// 	            //   vue.checkChoose();
		// 	            //   // vue.checkOwnPage();
		// 	            // })

		// 				setTimeout(function(){
		// 					vue.checkChoose(1);
		// 				},10)
		// 			}
		// 		}
		// 	})
		// },

		//检查是否选中
		checkChoose(item) {
			// debugger;
			if (item == 0) {
				var liChecked = document.getElementsByTagName("li");
				var listArr = [];
				for (var j = 0; j < this.shareIds.length; j++) {
					listArr.push(this.shareIds[j].id);
				}
				for (var i = 0; i < liChecked.length; i++) {
					if (listArr.indexOf(parseInt(liChecked[i].getAttribute("id"))) != -1) {
						liChecked[i].setAttribute('class', 'checked')
					} else {
						liChecked[i].setAttribute('class', '')
					}
				}
			} else {
				var liChecked = document.getElementsByTagName("li");
				var listArrs = [];
				for (var j = 0; j < this.alertIds.length; j++) {
					listArrs.push(this.alertIds[j].id);
				}
				for (var i = 0; i < liChecked.length; i++) {
					if (listArrs.indexOf(liChecked[i].getAttribute("id")) != -1) {
						liChecked[i].setAttribute('class', 'checked')
					} else {
						liChecked[i].setAttribute('class', '')
					}
				}
			}
		},

		// 判断状态是安全圈或者事故并且添加到
		chooseTypeSafe(item, e) {
			// debugger;
			if (e.currentTarget.getAttribute('class') == 'checked') {
				e.currentTarget.setAttribute('class', '');
				for (var i = 0; i < this.shareIds.length; i++) {
					if (this.shareIds[i].id == item.id) {
						this.shareIds.splice(i, 1);
					}
				}

			} else {
				e.currentTarget.setAttribute('class', 'checked');
				this.shareIds.push(item);

			}
		},
		chooseTypeAlert(item, e) {
			// debugger;
			if (e.currentTarget.getAttribute('class') == 'checked') {
				e.currentTarget.setAttribute('class', '');
				for (var i = 0; i < this.alertIds.length; i++) {
					if (this.alertIds[i].id == item.id) {
						this.alertIds.splice(i, 1);
					}
				}


			} else {
				e.currentTarget.setAttribute('class', 'checked');
				this.alertIds.push(item);

			}
		},

		// 切换安全圈，事故
		safeCollar(item, index) {
			// debugger;

			for (var i = 0; i < this.items.length; i++) {
				this.items[i].isShow = false;
			}
			item.isShow = true;

			if (index == 0) {
				this.countSafe = 0;
				this.safeAccident = [];
				this.safeCircle = [];
				this.typeVo = true;
				this.typeAcc = false;
				this.typeSer = true;
				this.getSafetyLoopData();
			} else {
				this.count = 0;
				this.safeCircle = [];
				this.safeAccident = [];
				this.typeAcc = true;
				this.typeVo = false;
				this.typeSer = false;
				this.getAlertData();

			}

		},

		// 搜索相关
		searchInit() {
			this.isFocus = true;
			let searchInput = this.$refs.searchInput;
			searchInput.focus();
		},
		// searchOver() {
		// 	// this.userList = [];
		// 	// this.count = 0;
		// 	let searchInput = this.$refs.searchInput;
		// 	searchInput.value = '';
		// 	this.isFocus = false;
		// 	this.safeCircle = [];
		// 	this.count = 0;
		// 	this.countSafe = 0;
		// 	this.getSafetyLoopData();
		// },
		searchBlur() {
			// this.isFocus = true;
			//this.getSafetyLoopData();
			let searchInput = this.$refs.searchInput;
			if (searchInput.value != '') {
				this.isFocus = true;
			} else {
				this.isFocus = false;
			}
			this.safeCircle = [];
			this.safeAccident = [];
			this.countSafe = 0;
			this.count = 0;
			if (this.typeSer) {
				this.getSafetyLoopData();
			} else {
				this.getAlertData();
			}

			// this.getAccidentList();
			// this.getAlertData();
		},
		searchClear() {
			// let searchInput = this.$refs.searchInput;
			// searchInput.value = '';
			// this.getUserList();
			//this.getSafetyLoopData();
			let searchInput = this.$refs.searchInput;
			searchInput.value = '';
			this.safeCircle = [];
			this.count = 0;
			this.countSafe = 0;
			this.getSafetyLoopData();
		},
		// 获取安全圈数据
		getSafetyLoopData() {
			let searchInput = this.$refs.searchInput;
			let title = searchInput.value;

			let type = this.picked;

			let param = {
				'pageSize': 10,
				'currentPage': this.countSafe,
				'title': title,
				'type': type,
				'empNo': this.personalId
			}

			this.$http.post(this.safetyloopUrl, param, { emulateJSON: true })
				.then((response) => {
					console.log(response);
					// console.log(response.data.resType);
					if (response.data.resType == "00") {
						let responseData = response.data.data;
						let resDataLen = responseData.length;
						this.pageTotleSafe = response.data.pages;
						if (resDataLen > 0) {
							this.hasNoData = false;

							if (this.pageTotleSafe > this.countSafe) {
								for (let i = 0; i < resDataLen; i++) {
									this.safeCircle.push(responseData[i])
								}
								this.countSafe++;
							}
						} else {
							this.hasNoData = true;
						}
						this.busySafe = false;

					} else {
						console.log(response.data.msg);

					}
				})
		},
		//获取事故的数据
		getAlertData() {
			let searchInput = this.$refs.searchInput;
			let title = searchInput.value;
			let type = this.picked;

			let param = {
				'pageSize': 10,
				'currentPage': this.count,
				'title': title,
				'type': type,
				'empNo': this.personalId
			}

			this.$http.post(this.getAlertUrl, param, { emulateJSON: true })
				.then((response) => {
					console.log(response);
					// console.log(response.data.resType);
					if (response.data.resType == "00") {
						let responseData = response.data.data;
						let resDataLen = responseData.length;
						this.pageTotal = response.data.pages;

						if (resDataLen > 0) {
							this.hasNoData = false;

							if (this.pageTotal > this.count) {
								for (let i = 0; i < resDataLen; i++) {
									if (
										responseData[i].accidentDate.indexOf(title) != -1 ||
										responseData[i].accidentNum.indexOf(title) != -1 ||
										responseData[i].bpAccidentType.indexOf(title) != -1 ||
										responseData[i].city.indexOf(title) != -1 ||
										responseData[i].country.indexOf(title) != -1
									) {
										this.safeAccident.push(responseData[i])
									}
								}
								this.count++;
							}
						} else {
							this.hasNoData = true;
						}
						this.busy = false;

					} else {
						console.log(response.data.msg);

					}
				})
		},

		// 返回到父页面
		backParent() {
			this.$parent.otherChooseIs = false;
		},

		//确定返回主页
		selectDataBack() {
			this.$parent.shareIdsName = this.shareIds;
			this.$parent.alertIdsName = this.alertIds;
			this.$parent.otherChooseIs = false;
		}
	}
}
</script>